<template>
  <div class="app-container report-order">
    <!-- <main-title title="FBM报表" /> -->
    <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" :is-picker-options="false" @handleSearch="handleSearch" />
    <div class="select_flex mb10">
      <div class="operation_button_box">
        <el-button v-action="'reportOrder@exportSale'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        <el-button size="small" @click="isActive=!isActive">{{ isActive?'展开':'收起' }}
        </el-button>
      </div>
    </div>
    <div v-loading="loading">
      <el-table :data="data" border fit :max-height="screenHeigh" @selection-change="handleSelectMulti">
        <el-table-column label="店铺" prop="shop_name" align="center" min-width="161" />
        <el-table-column label="平台名称" prop="platform" align="center" width="118">
          <template slot-scope="scope">
            <span>{{ scope.row.platform }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU" prop="goods_code" align="center" width="188" />
        <el-table-column label="中文名称" prop="name_ch" align="center" width="118" show-overflow-tooltip />
        <el-table-column label="产品分类" prop="category_name" align="center" width="180" show-overflow-tooltip />
        <el-table-column label="订单类型" prop="order_type" align="center" />
        <el-table-column label="币别" prop="currency" align="center" />
        <el-table-column label="单价" prop="price" align="center" width="118" />
        <el-table-column label="销售数量" prop="sales_numer" align="center" />
        <el-table-column label="销售总金额" prop="sales_amount" align="center" width="118" />
        <el-table-column label="上月销售数量" prop="pre_month_sales_numer" align="center" width="120" />
        <el-table-column label="上月销售总金额" prop="pre_month_sales_amount" align="center" width="120" />
        <el-table-column label="上月同期增长率" prop="pre_month_growth_rate" align="center" width="120" />
        <el-table-column label="动销率" prop="turnover_rate" align="center" min-width="120" />
        <el-table-column label="库转" prop="stock_transfer" align="center" width="107" />
      </el-table>
      <div class="bootom_style mtb">
        <div class="total_style">
          <span>总计销售数量：<b>{{ salesNumber }}</b></span>
          <span style="padding: 0 20px;">总计金额：<b>{{ salesAmount }}</b></span>
        </div>
        <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      </div>

    </div>
    <!--下载字段选择-->
    <DownModul url="reportOrder/export/sale" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="报表导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import report from '../mixins/index'
import DownModul from '@/components/DownModul/index.vue'
import { action } from '@/directive/permission/index.js'
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'ReportOrderSale',
  components: { DownModul },
  directives: {
    action
  },
  mixins: [report, cacheList],
  data() {
    const formatDate = () => {
      const date = new Date(Date.now())
      const YY = date.getFullYear() + '-'
      const MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return YY + MM + DD
    }
    return {
      otherHeight: 375,
      url: '/reportOrder/salseReport', // 接口路径
      componentName: 'ReportOrderSale',
      exportUrl: '/reportOrder/export/fbm',
      queryParam: {
        page: 1,
        limit: 10,
        shop_ids: '',
        date: [formatDate() + ' 00:00:00', formatDate() + ' 23:59:59']
      },
      searchShop: 1,
      formItems: [
        {
          label: '平台名称',
          key: 'platform',
          type: 'input',
          placeholder: '请输入订单平台名称'
        },
        // {
        //   label: '店铺名称',
        //   key: 'shop',
        //   type: 'input',
        //   placeholder: '请输入订单平台名称'
        // },
        {
          label: '店铺',
          key: 'shop_id',
          type: 'select',
          multiple: true,
          filterable: true,
          placeholder: '请选择店铺',
          options: []
        },
        {
          label: '中文名称',
          key: 'name_ch',
          type: 'input',
          placeholder: '请输入中文名称'
        },
        {
          label: 'sku',
          key: 'sku',
          type: 'input',
          placeholder: '请输入sku'
        },
        {
          label: '订单类型',
          key: 'order_type',
          type: 'select',
          placeholder: '请选择发货类型',
          options: [
            {
              label: 'FBA',
              value: 'FBA'
            },
            {
              label: 'FBM',
              value: 'FBM'
            }
          ]
        },
        {
          label: '创建时间',
          key: 'date',
          type: '',
          date: 'daterange',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '请选择时间范围'
        }
      ],
      optionsModul: [
        {
          key: 'shop_name',
          label: '店铺'
        },
        {
          key: 'platform',
          label: '平台名称'
        },
        {
          key: 'goods_code',
          label: 'SKU'
        },
        {
          key: 'name_ch',
          label: '中文名称'
        },
        {
          key: 'category_name',
          label: '产品分类'
        },
        {
          key: 'order_type',
          label: '订单类型'
        },
        {
          key: 'currency',
          label: '币别'
        },
        {
          key: 'price',
          label: '单价'
        },
        {
          key: 'sales_numer',
          label: '销售数量'
        },
        {
          key: 'sales_amount',
          label: '销售总金额'
        },
        {
          key: 'pre_month_sales_numer',
          label: '上月销售数量'
        },
        {
          key: 'pre_month_sales_amount',
          label: '上月销售总金额'
        },
        {
          key: 'pre_month_growth_rate',
          label: '上月同期增长率'
        },
        {
          key: 'turnover_rate',
          label: '动销率'
        },
        {
          key: 'stock_transfer',
          label: '库转'
        }
      ]
    }
  },
  created() { },
  methods: {
    beforeSearch() {
      const vm = this
      vm.queryParam.start_at = ''
      vm.queryParam.end_at = ''
      vm.queryParam.shop_ids = ''
      if (vm.queryParam.date && vm.queryParam.date.length > 0) {
        vm.queryParam.start_at = vm.queryParam.date[0]
        vm.queryParam.end_at = vm.queryParam.date[1]
      }
      if (vm.queryParam.shop_id && vm.queryParam.shop_id.length > 0) {
        vm.queryParam.shop_ids = vm.queryParam.shop_id.join(',')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.report-order .filter-container {
  border: none;
  padding-bottom: 0;
}
.total_style {
}
.bootom_style {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
